<template>
<div class="mini2">
  <Button icon="md-add" shape="circle" type="primary" @click="handleEdit({id:0})">新增</Button><br><br>
  <Table ref="table" :max-height="maxHeight" stripe :columns="columns" :data="data" border highlight-row>
  	<template #photo="{ row }"><img  :src="getPhoto(row.photo)" width="120"></template>
	<template #action="{ row, index }">
      <div class="ty-flex-row-around">
	      <span>
	       	<Button custom-icon="iconfont icon-bianji" @click="handleEdit(row)" shape="circle"></Button>&nbsp;
	      </span>
	      <span>
	        <Button custom-icon="iconfont icon-laji" @click="handleDeleteRow(row,index)" shape="circle"></Button>
	      </span>
      </div>
    </template>
  </Table>
  <Modal v-model="modal1"  @on-ok="handlePublish" fullscreen>
  	<template #header><Icon custom="iconfont icon-xinwen" /><span>&nbsp;新闻文章编辑</span></template>
    <div>
    	<Row>
		    <Col span="3"><Divider orientation="center" size="default"><Icon type="md-images" />封面图片</Divider></Col>
			<Col span="21"><Divider orientation="left" size="default"><Icon type="md-bookmark" />文章标题</Divider></Col>
	    </Row>
	    <Row>
		    <Col span="3" class="ty-flex-row-center">
			    <Upload ref="upload" :show-upload-list="false" :on-success="handleSuccess" :format="['jpg','jpeg','png']" 
			    	:max-size="20480" type="drag" name="file" style="display: inline-block;width:90px;" 
			    	:on-format-error="handleFormatError" 
			        :action="uploadAction">
			        <div style="width: 90px;height:64px;line-height: 64px;">
			            <Icon type="ios-camera" size="24" v-if="url==''"></Icon>
			            <img :src="photoUrl" height="64" v-else>
			        </div>
			    </Upload>
			</Col>
			<Col span="20" class="ty-flex-row-center">
				<Input ref="title" v-model="title" placeholder="请输入标题" maxlength="60" show-word-limit/>
		    </Col>
	    </Row>
	    <Divider orientation="left" size="default"><Icon type="md-paper" />文章内容</Divider>
	    <Row>
		    <Col span="1"></Col>
	    	<Col span="22"><QuillEditor v-model="content" ref="myQuillEditor" style="min-height: 200px;"/></Col>
	    </Row>
    </div>
    <template #footer> 
        <Button type="primary" size="large" long @click="handlePublish">发布文章</Button>
    </template>
  </Modal>
</div>
</template>
<script> 
import config from '@/config'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

export default {
	data(){
		return {
			content: '',
			url:'',
			title:'',
			id:0,
			modal1:false,
	        data:[],
	        columns:[
	        	{title:'文章序号',key:'id',width:100},
	        	{title:'文章标题',key:'title',tooltip:true},
        		{title:'封面照片',slot:'photo',width:150},
        		{title:'发布时间',key:'time',sortable: true,width:120},
        		{title:'发布人',key:'uname',width:120},
        		{title:'操作',slot:'action',width:120}
	        ]
		}
	},
    components: {
		QuillEditor
    },
    computed: {
        editor() {
          return this.$refs.myQuillEditor.quill
        },
        maxHeight(){
          return window.innerHeight-200
        },
        photoUrl(){
          return config.baseUrl+this.url
        },
        uploadAction(){
        	return config.baseUrl+'tangyin/main/mainMini2UploadPhoto.action'
        }
    },
	methods:{
		handleEdit(row){
			this.modal1=true
			if(row.id==0){
				this.title=''
				this.content=''
				this.url=''
				this.id=0
			}else{
				this.title=row.title
				this.content=row.content
				this.url=row.photo
				this.id=row.id
			}
		},
		handleDeleteRow(row,index){
			this.$Modal.confirm({title: '确定要删除文章？',onOk: () => {
           	   this.$axios.post("mainMini2DeleteRow.action",{int1:row.id}).then(res=>{
	   			   if(res.data=='suc'){
	       			   this.$Message.success('文章删除成功')
	       			   this.getMini2ArticalList()
	       		   }else{		   
	       			   this.$Message.error('文章删除失败'+res.data)
	       		   }
       		   })
	        }})
		},
		handlePublish(){
			if(this.title==''){
				//this.$refs.title.$el.style.border="1px solid red"
				this.$Message.warning('标题不能为空')
				return false
			}
			let artical={
				id:this.id,
				photo:this.url,
				title:this.title,
				content:this.content,
				uname:this.$store.state.user.userInfo.uname	
			}
			this.$axios.post("mainMini2ArticalSave.action",artical).then(res=>{
   			   if(res.data=='suc'){
       			   this.$Message.success('文章发布成功')
       			   this.modal1=false
       			   this.getMini2ArticalList()
       		   }else{		   
       			   this.$Message.error('文章发布失败'+res.data)
       		   }
   		   })
		},
		handleSuccess(response, file, fileList){
			this.url=response
		},
		handleFormatError(){
			this.$Message.success('不支持的文件格式')
		},
		getPhoto(photo){
			return config.baseUrl+photo
		},
		getMini2ArticalList(){
			this.$axios.get("mainMini2ArticalList.action").then(res=>{
				this.data=res.data
	    	})
		}
	},
	mounted(){
		this.getMini2ArticalList()
	}
}
</script>
<style scoped>
.mini2{padding:16px;}
</style>